<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>注册规则</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">
      [v-cloak] { display: none }
      .bd-light { border: 1px solid rgba(0, 0, 0, .1) }
      div.q-if-inner div.q-input-target {line-height: 24px}  /* 兼容 ie 的 */
    </style>
  </head>
  <body>
    <div id="q-registerRulesList" v-cloak class="q-pa-sm">
      <q-card class="bg-white no-shadow full-width">
        <q-card-main class="bd-light">
          <div class="row justify-start gutter-md q-px-sm">
            <q-field 
              class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <q-input
                :float-label="$t('注册规则')"
                v-model.trim="searchForm.search_LIKE_ruleName"></q-input>
            </q-field>
            <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <q-select
                :float-label="$t('规则状态')"
                :options="statusOptions"
                v-model="searchForm.search_EQ_ruleStatus"></q-select>
            </q-field>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <q-btn
                size="sm"
                @click="getList({pagination: serverPagination})"
                color="primary"
                class="q-mt-sm q-mr-sm q-pa-sm">
                <q-icon name="search"></q-icon>
                <span>{{ $t('查询') }}</span>
              </q-btn>
              <q-btn
                size="sm"
                color="secondary"
                @click="reset"
                class="q-mt-sm q-mr-sm q-pa-sm">
                <q-icon name="refresh" ></q-icon>
                <span>{{ $t('重置') }}</span>
              </q-btn>
            </div>
          </div>
          <q-table
            class="no-shadow"
            :data="data"
            dense
            :columns="columns"
            :visible-columns="visibleColumns"
            :rows-per-page-options="[5, 10, 20]"
            :loading = "listLoading"
            :pagination.sync="serverPagination"
            @request="getList"
            row-key="id"
          >
            <template slot="top-right" slot-scope="props">
              <q-table-columns
                style="width:66px"
                color="secondary"
                class="q-mr-sm"
                :label="$t('展示项')"
                v-model="visibleColumns"
                :columns="columns"
              ></q-table-columns>
              <q-btn
                flat round dense
                :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                @click="props.toggleFullscreen"
              ></q-btn>
            </template>
            <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
              第
              <q-pagination
                v-model="serverPagination.page"
                input
                boundary-links
                direction-links
                color="secondary"
                :max-pages="5"
                :ellipses="true"
                :max="pages"></q-pagination>
              页 &nbsp; 共 {{ total }} 条
            </div>
            <template slot="body" slot-scope="props">
              <q-tr
                :props="props"
              >
                <q-td key="action" :props="props" >
                  <q-btn
                    flat
                    size="xs"
                    v-if="props.row.ruleStatus == 2"
                    @click="toggleStartRule(1, props.row.id)"
                    color="secondary"
                  >启用</q-btn>
                  <q-btn
                    flat
                    size="xs"
                    v-if="props.row.ruleStatus == 1"
                    @click="toggleStartRule(2, props.row.id)"
                    color="negative"
                    >禁用</q-btn>
                </q-td>
                <q-td
                  key="ruleName"
                  :props="props">{{ props.row.ruleName }}</q-td>
                <q-td
                  key="ruleType"
                  :props="props">
                  <q-chip small square color="info">
                    {{ props.row.ruleType == 1? '注册规则': '暂无' }}</q-chip>
                </q-td>
                <q-td
                  key="ruleStatus"
                  :props="props">
                  <q-chip small square color="positive" v-if="props.row.ruleStatus == 1">已启用</q-chip>
                  <q-chip small square color="warning" v-if="props.row.ruleStatus == 2">已禁用</q-chip>
                </q-td>
                <q-td
                  key="createTime"
                  :props="props">{{ props.row.createTime }}</q-td>
                <q-td
                  key="lastUpdateTime"
                  :props="props">{{ props.row.lastUpdateTime }}</q-td>
                <q-td
                  key="createUserName"
                  :props="props">{{ props.row.createUserName }}</q-td>
                <q-td
                  key="updateUserName"
                  :props="props">{{ props.row.updateUserName }}</q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-main>
      </q-card>
    </div>
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/registerRulesList.js"></script>
    <script>
      // quasar components i18n
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      var registerRulesList = new Vue({
        el: '#q-registerRulesList',
        i18n: i18n,
        data: function () {
          return {
            // 查询
            searchForm: {
              search_LIKE_ruleName: '',
              search_EQ_ruleStatus: ''
            },
            statusOptions: [
              {
                label: '请选择',
                value: ' '
              },
              {
                label: '启用',
                value: '1'
              },
              {
                label: '禁用',
                value: '2'
              }
            ],
            isShowMoreSearch: false,
            // 表格数据
            data: [],
            total: 0,
            // 分页
            serverPagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 5
            },
            // 可见的列
            visibleColumns: [
              'action',
              'ruleName',
              'ruleType',
              'ruleStatus',
              'createTime',
              'lastUpdateTime',
              'createUserName',
              'updateUserName'
            ],
            listLoading: false,
            btnLoading: false
          }
        },
        computed: {
          // 表格配置
          columns: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'ruleName',
                label: this.$t('规则名称'),
                align: 'left',
                field: 'ruleName'
              },
              {
                name: 'ruleType',
                label: this.$t('规则类型'),
                align: 'left',
                field: 'ruleType',
                sortable: true
              },
              {
                name: 'ruleStatus',
                label: this.$t('启用状态'),
                align: 'left',
                field: 'ruleStatus',
                sortable: true
              },
              {
                name: 'createTime',
                label: this.$t('创建时间'),
                align: 'left',
                field: 'createTime',
                sortable: true
              },
              {
                name: 'lastUpdateTime',
                label: this.$t('最后更新时间'),
                align: 'left',
                field: 'lastUpdateTime',
                sortable: true
              },
              {
                name: 'createUserName',
                label: this.$t('创建人名称'),
                align: 'left',
                field: 'createUserName'
              },
              {
                name: 'updateUserName',
                label: this.$t('最后更新人名称'),
                align: 'left',
                field: 'updateUserName'
              }
            ]
          },
          pages: function() {
            return Math.ceil(this.total / this.serverPagination.rowsPerPage)
          }
        },
        created: function () {
          // vue-i18n
          this.$i18n.locale = LANGUGE
          this.getList({
            pagination: this.serverPagination
          })
          if (this.$q.cookies.has('registerRulesList_visible_columns')) {
            this.visibleColumns = this.$q.cookies.get('registerRulesList_visible_columns')
          }
        },
        watch: {
          'serverPagination.page': function (page) {
            this.getList({
              pagination: this.serverPagination
            })
          },
          visibleColumns: function (visibleColumns) {
            this.$q.cookies.set('registerRulesList_visible_columns', this.visibleColumns, {
              expires: 30,
              domian: COOKIES_DOMIAN,  // 这里替换域名
              path: COOKIES_PATH  // 设置目录
            })
          }
        },
        methods: {
          getList: function (arg) {
            this.listLoading = true
            this.serverPagination = arg.pagination
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/ruleList',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : ''),
                search_LIKE_ruleName: this.searchForm.search_LIKE_ruleName,
                search_EQ_ruleStatus: this.searchForm.search_EQ_ruleStatus,
                search_EQ_ruleType: 1
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.data = data.rows
                that.total = data.total
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }              
              that.listLoading = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 重置
          reset: function () {
            this.searchForm = {
              search_LIKE_ruleName: '',
              search_EQ_ruleStatus: ''
            }
            this.getList({ pagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 5
            }})
          },
          toggleStartRule: function(status, id) {
            var that = this
            this.$q.dialog({
              title: this.$t('确认')+'？',
              message: status == 1? '确认要启用该条规则吗': '确认要禁用该条规则吗',
              ok: {
                label: this.$t('确认'),
                flat: true
              },
              cancel: {
                label: this.$t('取消'),
                flat: true
              }
            })
            .then(function() {
              axios({
                method: 'post',
                url: '/manager/new/ruleList/changeStatus',
                data: {
                  id: id,
                  ruleStatus: status
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: status == 1 ? '启用成功': '禁用成功' ,
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                } 
                that.getList({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function() {
              // 选择"Cancel"或作了关闭操作
            })
          }
        }
      })
    </script>
  </body>
</html>
